<template lang="html">
    <div class="" style="border:1px solid red;height:300px;">
        <div class="">
            <transition name="fade">
                <div class="box" v-show="isShow">
                    我是测试动画
                </div>
            </transition>
            <button type="button" @click="toggle()" name="button">切换</button>
        </div>
        <div class="">
            <transition name="drop">
                <div class="drop" v-show="isDropShow">
                    掉落效果
                </div>
            </transition>
            <button type="button" @click="(isDropShow=!isDropShow)" name="button">掉落动画</button>
        </div>
        <div class="">
            <transition name="fade" mode="out-in">
                <div :is="currentView"></div>

            </transition>
            <button type="button" @click="toggleCom()" name="button">切换</button>
        </div>

        <div class="" v-css="{'color':'red'}">
             内容
        </div>

    </div>
</template>

<script>
import Trans1 from '@/base/trans1.vue'
import Trans2 from '@/base/trans2.vue'
export default {
	components: {
		Trans1,
		Trans2
	},
	data() {
		return {
			isShow: true,
			isDropShow: true,
			currentView: 'Trans1',
			jsShow: true
		}
	},
	methods: {

		toggle() {
			this.isShow = !this.isShow;
			console.log(this.isShow);
		},
		toggleCom() {
			if (this.currentView == 'Trans1') {
				this.currentView = Trans2;
			} else {
				this.currentView = Trans1;
			}
		}
	}
}
</script>

<style lang="css">
.drop{
    width:100px;
    height:100px;
    border:1px solid red;
}
.box{
    width:100px;
    height:100px;
    border:1px solid blue;
}
.fade-enter-active,.fade-leave-active{
    transition: 0.5s;
}
.fade-enter,.fade-leave-active{
    opacity: 0;
}

/*掉落效果*/
.drop-enter-active,.drop-leave-active{
    transition: 0.5s;
}
.drop-enter{
    transform: translateY(-500px);
}
.drop-leave-active{
    transform: translateY(500px);
}
.jsAnimate{
    position: absolute;
    left:0;
    top:0;
}
</style>
